<template>
<div>
    <Table border :columns="columns" :data="data"></Table>

    <Modal v-model="amend" title="数据操作">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="年龄" prop="age">
          <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
        </FormItem>

            <FormItem label="性别" prop="sex">
          <Input v-model="formValidate.sex" placeholder="请输入性别"></Input>
        </FormItem>
        <FormItem label="电话" prop="Tel">
          <Input v-model="formValidate.Tel" placeholder="请输入手机号"></Input>
        </FormItem>    <FormItem label="QQ" prop="QQ">
          <Input v-model="formValidate.QQ" placeholder="请输入QQ"></Input>
        </FormItem>
        <FormItem label="证件号" prop="Idcard">
          <Input v-model="formValidate.Idcard" placeholder="请输入证件号"></Input>
        </FormItem>
        <FormItem label="email" prop="email">
          <Input v-model="formValidate.email" placeholder="请输入email"></Input>
        </FormItem>
         <FormItem label="地址" prop="address">
          <Input v-model="formValidate.address" placeholder="请输入地址"></Input>
        </FormItem>
        <FormItem label="hobby" prop="hobby">
          <Input v-model="formValidate.hobby" placeholder="请输入爱好"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
      </Form>
      <div slot="footer">
        我就不显示按钮
      </div>
    </Modal>

</div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "商品ID",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "商品名称",
          key: "age"
        },
        {
          align: "center",
          width: 90,
          title: "商品数量",
          key: "age"
        },
        {
          title: "商品属性",
          key: "address"
        },
        {
          title: "店铺ID",
          key: "address"
        },
        {
          title: "商品单价",
          key: "address"
        },
        {
          title: "商品金额",
          key: "address"
        },
        {
          title: "订单备注",
          key: "address"
        },
        {
          title: "修改时间",
          key: "address"
        },
        {
          title: "订单状态",
          key: "address"
        }, 
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park"
        }
      ]
    };
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "修改信息",
        content: `商品ID：
                    <input type="text" value=${this.data[index].name}>
                    <br>
                    商品名称：
                    <input type="text" value=${this.data[index].name}>
                    <br>
                    商品数量：
                    <input type="text" value=${this.data[index].name}>
                    <br>
                    商品属性：
                    <input type="text" value=${this.data[index].name}>
                    <br>
                    店铺ID：
                    <input type="text" value=${this.data[index].name}>
                    <br>
                    订单备注：
                    <input type="text" value=${this.data[index].name}>
                    <br>
                    订单状态：
                    <input type="text" value=${this.data[index].name}>
                    <br>
                    `
      });
    },
    remove(index) {
      this.data.splice(index, 1);
    }
  }
};
</script>
